<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>答题卡识别</title>
</head>
<body>
<form action="/result" enctype="multipart/form-data" id="form1" method="post">
    <div>
        <label for="profile_pic">Choose file to upload</label>
        <input accept=".jpg,.jpeg,.png" id="profile_pic" multiple="multiple" name="profile_pic" type="file">
    </div>
    <div>
        <button id="btn" type="button">提交</button>
        {{message}}
    </div>
</form>
</body>
<script>
        const btn = document.getElementById("btn");
        const form1 = document.getElementById("form1");
        const pic = document.getElementById("profile_pic");
        btn.onclick = function () {
            //如果文件输入框的文件的长度为0，则弹出警告
            if (pic.files.length == 0) {
                alert("请先至少选择一个文件！");
                return;
            }
            //提交文件    HTMLFormElement.submit() 用来提交表单 <form>。
            //判断文件是否符合要求
            for (let i = 0; i < pic.files.length; i++) {
                console.log(i);  //0 1 2 3
                if (!checkFormat(pic.files[i])) {
                    alert("请确保上传的文件符合要求(.jpg/.png/.jpeg)")
                    return
                }
            }
            form1.submit();
            alert("上传成功!请等待响应。")
        }

        function checkFormat(o) {
            let filename = o.name;//文件名称
            let suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();  //png jpg等
            let file_format = ['jpg', 'png', 'jpeg'];
            //看看这个后缀存不存在于file_format数组当中
            if (file_format.includes(suffix)) {
                return true
            }
            return false
        }

</script>
</html>